import "@/views/Login/Login.scss"
import React, { useEffect, useState, } from 'react'

import { Form, Input, Checkbox, Button, notification } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import service from "../../api"
import { useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'


interface Props {

}
function Login(props: Props) {
    const navigate = useNavigate()//路由

    const dispatch = useDispatch()//redux
    //登录验证
    var onFinish = async (formvalues: any) => {
        console.log(formvalues.phone, formvalues.pass);
        console.log(formvalues)
        //发起登陆请求
        // const res = await service.user.user_login({ phone: formvalues.phone, pass: formvalues.pass });
        const res = await service.user.user_login({ ...formvalues });
        console.log(res, "25")
        if (res) {
            notification.success({ message: '登陆成功!' });
            //保存用户信息
            // dispatch({ type: 'SAVE_TOKEN', payload: res.data.data.token })
            // dispatch({ type: 'SAVE_ADMINNAME', payload: res.data.data.adminname })
            console.log(res)

            navigate('/index/home');
        } else {
            notification.error({ message: '登陆失败!' })
        }

    }
    //表单验证失败时执行
    var onFinishFailed = (formvalues: any) => {
        console.log(formvalues);
    }

    //账号的校验
    var userValidator = (rule: any, value: string, callback: any) => {
        if (value) {
            callback();
        } else {
            callback(new Error('请输入正确的手机号!'))
        }
    }
    //密码的校验
    var passValidator = (rule: any, value: string, callback: any) => {
        if (/^\d{4}$/.test(value)) {
            callback();
        } else {
            callback(new Error('请输入符合格式的密码!'))
        }
    }

    return (
        <div className='login'>
            <div className="box">
                <div className="top">
                    <img id="blue" src="https://cdn7.axureshop.com/demo/1903216/images/%E7%99%BB%E5%BD%95/u301.svg" alt="" />
                    <img id="bai" src="	https://cdn7.axureshop.com/demo/1903216/images/%E7%99%BB%E5%BD%95/computer_u302.svg" alt="" />
                    <span>七尾知识付费运营管理后台</span>
                    <p>专业数字化管理与用户运营工具，提高知识付费转化率</p>
                    <p>账号密码登录</p>
                </div>
                <Form
                    className='form'
                    style={{ maxWidth: 600 }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete='off'
                >
                    <Form.Item
                        name="phone"
                        rules={[{ required: true, validator: userValidator }]}

                    >
                        <Input prefix={<UserOutlined />} placeholder="用户名" />
                    </Form.Item>

                    <Form.Item
                        name="pass"
                        rules={[{ required: true, validator: passValidator }]}
                    >
                        <Input.Password prefix={<LockOutlined />} placeholder="密码" />
                    </Form.Item>

                    <Form.Item >
                        <Checkbox>
                            <p>自动登录 <span>忘记密码？</span> </p>
                        </Checkbox>
                    </Form.Item>

                    <Form.Item wrapperCol={{ span: 24 }}>
                        <Button block type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form>
                <div className="xia">
                    <span>微信登录</span>
                    <img id="ccc" src="https://cdn7.axureshop.com/demo/1903216/images/%E7%99%BB%E5%BD%95/u322.svg" alt="" />
                    <img id="wei" src="https://cdn7.axureshop.com/demo/1903216/images/%E7%99%BB%E5%BD%95/u323.svg" alt="" />
                </div>

            </div>
        </div>
    );
}

export default Login;